在现代互联网时代，Web 应用程序和网站已经超越了简单的信息传递工具，它们成为了与用户互动和建立连接的媒介。为了在这个数字世界中脱颖而出，Web 动画成为了一种强大的设计元素，能够吸引用户的注意、提高用户体验并有效传达信息。
Web 动画已经成为了 Web 设计的重要组成部分，但要创造出引人入胜的动画效果，需要遵循一些关键的原则。这些原则不仅使动画更吸引人，还确保它们与用户界面和内容完美融合。那么，我们如何确保有效地使用动画呢？学习的最佳榜样莫过于计算机动画的先驱迪士尼。在这节课中，我们将探讨迪士尼的 12 大动画原则以及如何将它们应用于 Web 动画中，以创造出令人印象深刻的动画效果。
不论你是一名 Web 设计师、开发者还是数字创意专家，了解这些原则将有助于提高你的 Web 动画技能，为用户提供更丰富、更有吸引力的在线体验。让我们一起探索 Web 动画设计原则，并掌握创建引人入胜动画的艺术。
动画是一种引人入胜且充满活力的艺术形式，多年来已经有了显著的发展。在动画世界的重要贡献者之一是沃尔特·迪士尼（Walt Disney）和他领导的一群才华横溢的动画师。
沃尔特·迪士尼曾经说过这么一段话：
对于心灵而言，似乎真实的东西可以与任何物质事实一样重要。我们生活在精神和想象力中，也生活在感官中。卡通动画可以使幻想与我们能够触摸、看到和听到的东西一样真实。
迪士尼的动画师奥利·约翰斯顿（Ollie Johnston）和弗兰克·托马斯（Frank Thomas）制定了 12 大动画原则，以制作更加真实的动画。1981 年在他们的著作《生活的错觉》中引入了这些原则，这本书被誉为动画中的圣经。
这 12 大动画原则结合了物理学的基本法则 —— 所有动画都需要遵循以确保真实性、以及认知心理学原则，旨在唤起情感。尽管这些原则最初是为传统动画（如角色动画）设计的，但随着技术不断发展，计算机、手机和可穿戴界面越来越能够实现更高程度的保真度和流动性，人们越来越能够在图形用户界面（GUI）中看到这 12 大基本动画原则的应用。其中一些可以直接用于呈现，其他一些则体现在理念上。在这节课中，我们将探讨这些原则如何应用于 Web 动画。
迪士尼 12 大动画原则共同构成了动画制作的基础，不仅适用于传统手绘动画，还适用于 Web 动画。它们有助于 Web 设计师和开发者创作出更具表现力、吸引力和引人入胜的动画。这些原则不仅适用于动画领域，还可以在其他领域中应用，包括用户界面设计、游戏开发和影视制作。
即使你不是动画专家也可以跟随学习这些动画原则。我们结合实际用例向大家阐述和展示它们在动画制作上的作用，同时使你更易于理解和掌握这些动画原则，帮助你将你制作的动画转化为更具真实感的错觉。
挤压和拉伸（Squash and Stretch）原则是传统动画中的基本技巧，用于增加动画物体的真实感和表现力。它的主要思想是，在物体移动或发生形变时，它们应该具有弹性，就像现实世界中的物体一样。
挤压和拉伸原则对于创建具有重力、重量、质量和灵活性错觉的动画至关重要。它通常用于传达动画中的力量、速度和重量。一个常见的示例就是弹跳的球，当它上下移动时会被拉伸，当它触地时会压缩。它的拉伸和挤压程度取决于球应该由什么材料制成。如果球是由橡胶制成，效果将非常明显，而如果它模拟的是保龄球，效果将非常微妙。
在数字界面中，挤压和拉伸原则使元素感觉触感丰富，并提供关于可操作性的视觉提示或反馈。例如，按压按钮时会发生挤压，双击窗口标题栏时会发生拉伸，或者在页面底部达到时，会发生挤压和拉伸，表示无法进行进一步的滚动。
在 Web 设计中，挤压和拉伸可以轻松地与按钮相关联。例如，按钮的按下状态是挤压。通过控制挤压和拉伸，我们可以轻松地定义按钮的特性。
除了按钮，这也可以应用于界面上的任何交互元素。例如，侧边栏的收缩与展开：
我们可以通过 CSS 属性 transform 来实现这种挤压和拉伸效果：
这个效果事实上就是模拟一个橡皮球从上面掉落的动画效果。使用了 CSS 变换（transform）的 translate 使物体沿着 y 轴改变位置（掉落的动画）：
@keyframes up {
0% {
translate: 0 100px;
}
50% {
translate: 0 0;
}
100% {
translate: 0 0;
}
}
@keyframes down {
0% {
translate: 0 0;
}
50% {
translate: 0 0;
}
100% {
translate: 0 100px;
}
}使用 scale 使物体沿着 Y 轴做挤压的效果：
@keyframes squash {
0% {
scale: 1 0.8;
}
6% {
scale: 1 1;
}
93% {
scale: 1 1;
}
100% {
scale: 1 0.8;
}
}使用同样的方案，可以同时实现挤压和拉伸的效果：
这里整理了几条关于挤压和拉伸原则的关键点，它们有助于理解挤压和拉伸原则在动画中的作用和如何有效地应用它们：
预备动作（Anticipation）原则强调为用户即将发生的动作或事件做准备，即在进行某个动作之前，需要有一些准备动作来暗示即将要发生的事情。它涉及在主要动作之前进行短暂的暂停或相反方向的动作。预备动作有助于增加动画的可理解性、吸引力和自然感，使用户更容易跟随故事情节和理解角色的行为。例如，在经典的迪士尼电影《狮子王》中，当辛巴即将扑击时，他会蹲下身子然后一跃而起。这种蹲下的动作为随后的跃起提供了预备动作。大多数动作都会出现类似的现象。我们的大脑在潜意识层面处理了许多这样的预备动作。
在数字界面中，你可以使用预备动作原则来告知用户如果执行特定操作会发生什么。这一原则的主要应用之一是悬停动画，每当用户将鼠标悬停在元素上时，某些元素会产生反应，表明它是可点击的，当你点击它时将发生某些事情。
Demo 地址：https://codepen.io/airen/full/yLGWWYo （来源于：@Vineeth.TR）
以下是预备动作的一些关键要点：
在动画中，预备动作可以是微小的细节，如角色的眼神变化、身体的微小移动，或者更显著的动作，如弯腰、深呼吸等。这些准备动作都有助于使动画更生动、更自然，同时提高了用户的情感互动和理解程度。通过巧妙地运用预备动作，动画制作者可以创造出更具吸引力和引人入胜的动画作品。
舞台布局（Staging）原则强调确保用户能够清晰地看到动画中的重要要点，以保持情节的清晰和角色的表现力。它是一种与视觉传达和故事叙述有关的技术，旨在引导用户的注意力并增加动画的效果。
舞台也是集中注意力的关键。就像在剧院舞台上一样，灯光将投射在最重要的区域上。换句话说，舞台布局编排了场景，它涉及到物体在场景中的摆放方式，每个动画的执行时间和方式等。它将注意力引导到场景中最重要的物体上。
在界面方面，舞台布局决定了元素的放置位置以及在发生互动时它们如何编排。它将用户的注意力引导到预期的元素上。假设有一款音乐应用程序，可以根据我们的兴趣为我们推荐音乐。如果用户想听类似类型的歌曲，这样的应用应该会让他们喜欢上这首歌。因此，有必要将“喜欢”操作（它可能是一个爱心的图标）与其他编排的元素分开。
例如下面这个示例，也是一个音乐应用的播放页面，“Like” 按钮背景有一个微弱呼吸灯的动画效果，并且用户点击该按钮之后会有一个“+1” 的动画效果。
以下是舞台布局的一些关键要点：
舞台布局是动画制作中的关键因素，它确保动画场景的清晰度、角色的情感表达和用户的引导。通过有效的舞台布局，动画可以更生动、更具吸引力，同时保持故事情节的连贯性和可理解性。
连续动作和关键帧动作（Straight Ahead Action and Pose To Pose）原则中包括了两种不同的制作动画的方法，分别是连续动作（Straight Ahead Action）和关键动作（Pose To Pose）。这两种方法有各自的特点和适用情境：
例如，在一个角色的行走循环中，关键动作（关键帧到关键帧）会定义起点和终点的关键位置，而连续动作会逐帧制作动画，捕捉所有过渡时刻。
在 Web 动画中，你可能会使用关键帧动画的方法，尤其是在 CSS 动画中，例如，创建组件状态，除非你想要动画化某些不寻常的东西。也就是说，我们将添加关键帧动作，然后浏览器将自动“插值”中间帧。
例如下面这个动画效果，卡通人物的动作效果使用了连续动作方法，而卡通人物向前移动则使用了关键帧方法：
另外，我们还可以使用该原则来制作钟摆的动画效果：
Demo 地址：https://codepen.io/airen/full/gOZNxWQ （来源于 @David Khourshid）
连续动作（Straight ahead action）和关键动作（Pose to pose）都有一些关键要点，以确保最终动画效果出色。其中，连续动作（Straight Ahead Action）的一些关键要点：
关键动作（Pose to Pose）的一些关键要点：
不论选择哪种方法，你都需要具备良好的动画基础知识，包括时序、空间感和物理原理，以确保动画看起来自然、吸引人和令人信服。选择方法通常取决于项目需求、动画风格和个人技能。有时候，你还可以在项目中结合使用这两种方法，以达到最佳效果。
跟随动作与重叠动作（Follow Through and Overlapping Action）原则强调了在动画中物体停止运动时，其附着部分可能会继续运动，而不是立刻停下来。它使动画看起来更加自然和流畅。具体来说：
这一原则反映了事实，即物体的各个部分并非同时移动。例如，看着镜子中的自己摇晃头部。如果你头发较长，你会看到头发的运动稍微滞后于头部的运动，而你的眼睛可能也有不同的运动（重叠动作）。这种现象在物体在运动后停下来时尤为重要。以相同的例子来说，即使你停止了头部的运动，你的头发可能仍然会稍微继续运动（跟随动作）。
在 Web 动画设计中，你可以拥有彼此相关但可能以不同速率移动的元素。例如，你可以有一个图像、一个标题和一个描述。运动的发起者将是最关键的元素，在这种情况下是图像。然后标题和描述跟随。这一原则有助于在界面中建立层次结构。
在 Web 中，我们可以看到使用视差效果来实现类似的效果。例如下面这个效果，卡片滑动时，卡片上的缩略图和 Logo 以不同的速度开始，显示重叠的动作：
Demo 地址：https://codepen.io/airen/full/ZEVdabm （来源于 @Wikyware Net）
在一些悬浮状态的动画效果也可以使用该原则来制作，例如：
Demo 地址：https://codepen.io/airen/full/JjwQOKj （来源于 @Andy Merskin ）
然而，重要的是要注意，并非所有应用都需要这种跟随动作和重叠动作，而且不能减慢用户完成任务的速度。
跟随动作（Follow Through）和重叠动作（Overlapping Action）是动画制作中重要原则之一，用于使动画看起来更加自然和流畅。以下是它们的一些关键要点：
总之，跟随动作和重叠动作是关于模仿自然运动和增强动画的真实感和流畅性的原则。它们在角色动画、界面设计和物体运动中都具有广泛的应用，有助于创造更引人入胜和生动的动画效果。这个原则在动画制作中被广泛采用，以提高动画的质量和吸引力。
渐快与渐慢也被称为“缓动”，它强调了在动画中物体通常在开始和结束运动时逐渐加速和减速的动态效应。简单地说，它指的是物体运动的渐进加速和减速。它模仿了现实世界中物体的开始和停止时逐渐加速和减速的方式，而不是突然。这有助于使动画看起来更加流畅、自然，同时增加了动画的真实感。具体来说：
在 Web 动画中，随着动作的结束，通常会采用缓动动作，使其看起来更加平滑和愉悦。表面上看，缓入缓出可能看起来像是一种美学实现，但它越来越多地被用作认知支持，帮助用户理解已经发生的动画。换句话说，没有缓入和缓出的动画，它看起来会显得呆板无生气。
渐快和渐慢动画原则在 Web 动画中经常出现，比如：
比如下面这个加载动画，使用了渐慢原则：
渐快和渐慢原则在 Web 动画中使用是最频繁的，因为该原则能和 Web 动画中的缓动函数相匹配，比如 ease-in 、ease-out 、ease-in-out 和 cubic-bezier() 等。
在 Web 动画中，缓动函数用于控制动画的速度变化，以模拟现实世界中物体的渐快和渐慢运动。
ease-in 缓动函数表示动画开始速度较慢，然后逐渐加速。这与渐快动画原则一致，因为渐快动画原则要求物体在开始时以较慢的速度移动，然后逐渐加速ease-out 缓动函数表示动画在结束时逐渐减速，这与渐慢动画原则一致。根据渐慢动画原则，物体在接近停止时会逐渐减速，而不是突然停止ease-in-out 缓动函数结合了渐快和渐慢的特性。它表示动画开始时速度较慢，然后逐渐加速，同时在结束时逐渐减速。这与渐快和渐慢的动画原则一致，因为渐快动画原则要求物体在开始时以较慢的速度启动，然后逐渐加速，而渐慢动画原则要求物体在结束时以较慢的速度减速在 Web 动画中，使用渐快或加速曲线（ease-in）可以实现渐快的动画效果，在开始时，元素的位置变化缓慢，速度逐渐增加，这意味着元素以一定的加速度移动。
当元素以全速飞出屏幕时，应使用渐快或加速曲线，这些元素可以是系统通知或页面上的卡片。但请记住，只有当对象永远离开屏幕并且我们无法回忆或返回时，才应使用渐快原则（加速曲线 ease-in）。
而渐慢（或减速曲线）和渐快（或加速曲线）刚好相反，它可以实现渐慢动画效果，使元素在结束时以较慢的速度减速，以模拟物体在现实世界中的减速运动方式。
当元素出现在屏幕上时，应该使用渐慢原则或减速曲线。它以最大速度飞向屏幕，逐渐减速，直到完全停止，这也可以应用于从屏幕外部出现的不同卡片或对象。
ease-in-out 是最匹配渐快与渐慢动画原则的，它可以实现渐快和渐慢的动画效果，使元素在动画的开始和结束都表现出速度的变化，从而创建更流畅、自然和吸引人的动画。它也是 Web 动画中最常见的一种。每当你对在动画中使用哪种运动方式感到困惑或疑虑时，就请使用渐快与渐慢的动画原则，因为它最能模拟现实世界中物体的运动方式。
除此之外，你还可以使用 cubic-bezier 缓动函数来控制动画的渐快和渐慢效果。通过调整 cubic-bezier 函数的参数，你可以创建自定义的速度曲线，以在动画的不同阶段实现渐快和渐慢的动画效果。
因此， cubic-bezier 函数通常用于与渐快和渐慢动画原则相匹配，以创建更自然和吸引人的动画。这使得你可以根据需要自定义动画的速度曲线，以模拟现实世界中的运动方式。通常，你可以通过以下方式来匹配 cubic-bezier 缓动函数与渐快和渐慢动画原则：
ease-in ） ：为了实现渐快效果，你可以选择一个 cubic-bezier 函数，其中初始速度较慢，然后逐渐加速。典型的 cubic-bezier 函数参数可能为 (0.42, 0.0, 1.0, 1.0)，这会导致开始时较慢的动画，然后在接近动画结束时加速。ease-out ） ：为了实现渐慢效果，你可以选择一个 cubic-bezier 函数，其中动画在接近结束时逐渐减速。典型的 cubic-bezier 函数参数可能为 (0.0, 0.58, 0.58, 1.0)，这将导致动画在接近结束时减速。ease-in-out ） ：为了同时实现渐快和渐慢的效果，你可以选择一个 cubic-bezier 函数，使动画在开始和结束时都较慢，而在中间逐渐加速。典型的 cubic-bezier 函数参数可能为 (0.42, 0.0, 0.58, 1.0)，这会在动画的两个极端（开始和结束）产生渐快和渐慢的效果，而在中间加速。注意，我们将会在后续章节中详细阐述缓动函数和二次贝塞尔曲线在 Web 动画中的应用以及如何使用它们来制作出更有吸引力的，更有活力的动画效果。这里就不做过多的阐述了。
最后，我们来看一下渐快和渐慢动画原则的一些关键要点：
总之，渐快和渐慢动画原则是创造自然、吸引人和情感丰富的动画的关键要点。通过控制速度的变化，设计师可以影响观众的感知和互动，使动画更具现实感和吸引力。
在现实世界中，大多数物体都会沿着轻微的弧线移动，例如，当你扔石子或纸飞机时，它们通常会沿着弧线路径飞行，而不是直线。通常情况之下，任何遵循平滑曲线的运动在审美上会令人更感到愉快，因为动作看起来更自然、流畅和真实。有时动作围绕一个点旋转（比如手臂绕肩膀旋转），而其他时候它们受到外部力量的作用（比如重力，向心力和离心力）。我们在动画中使用弧线来模仿这些现象，使动画看起来更自然。
在 Web 动画中，Web 设计师和开发人员一直在使用弧线作为动画路径而不是直线来赋予动画以生命。例如：
这一原则的一个很好示例是 Mac 的 Dock 栏悬停动画，它使通过 Dock 栏中锚定的不同应用程序的导航变得直观和有趣。
Demo 地址：https://codepen.io/airen/full/dywBxwK （来源于 @Jhey）
从高处抛出的球会沿着抛物线路径运动。弧线使事物看起来更自然。在界面中，遵循对角线路径的元素可以通过弧线运动变得更自然。当你想突出元素的路径时，可以使用弧线。这一原则强调在动画中物体和角色的运动通常应该遵循弧线路径，而不是直线路径。你在制作 Web 动画时，可以遵循以下一些关键要点，使用弧线路径使动画看起来更加自然、流畅和真实：
附属动作（Secondary Action）原则强调在动画中添加额外的次要动作，以增强动画的真实感和表现力。简单地说，附属动作是主要动作的补充，可以为角色的表现增添深度。附属动作通常是与主要动作相辅相成的，但不应该分散用户的注意力。
另外，附属动作有助于传达主要动作已经发生或正在发生。在人机交互中，反馈的作用是让用户知道所期望的动作已经发生。反馈是数字界面中可接受性的关键组成部分。有趣的是，没有反馈也是表明没有动作发生的反馈。良好的反馈是信息丰富的，与动作相关，与动作的含义相关，并产生闭合感。
在 Web 中，你可以使用附属动作来引发用户的情感。想象一下，用户已经提交了一个非常长的表单。你可以为提交按钮添加一个辅助的庆祝动画（比如，纸屑），以祝贺用户完成了一个耗时的任务。这样的辅助动作可以增强用户体验并营造愉快的氛围。
Twitter 卡片上点赞的动画效果就是附属动作原则在 Web 动画中应用的典型案例之一：
你还可以将附属动作原则用于以下情境中：
附属动作原则在 Web 设计中都起着重要作用，它们可以增强交流、提供反馈和丰富用户体验。在 Web 设计中，特别是在微交互和用户界面设计中，附加动作原则有助于使用户界面更具吸引力和易于理解。你在 Web 中制作动画时，可以根据以下要点将附属动作原则用于动画上：
时间控制是所有界面动画的基本要素。时间控制和缓动功能一起在动画编排中发挥着重要作用。时间控制强调在动画中，物体和角色的运动速度和节奏，它可以增加动作的流畅性，引导用户的注意力并传达可接受性。然而，如果时间控制不正确，过长的过渡会让用户等待时间太长；另一方面，如果动画过快，用户可能会错过一些重要信息。正确地控制动画元素的时间可以帮助用户感知反馈并顺利完成任务，甚至在这个过程中使他们感到愉悦。
在 Web 动画中，你可以使用时间控制来向用户提供信息。例如，你可以将文件加载动画的速度与文件的大小关联起来。这将让用户知道这个过程将需要多长时间以及原因，因此如果上传的是一个大文件，上传过程会较慢，而如果是一个小文件，上传过程会快得多。
通常，大多数 Web 动画的时长在 200ms ~ 600ms 之间。你可以参考 Material Design，该设计语言有对每种类型的动画时长进行了很好的解释。例如下面这个卡片轮播的动画效果，每张卡片延迟 3s 开始向上滚动：
我们可以根据以下要点在制作动画中使用时间控制原则：
时间控制是动画制作中的重要原则，它可以改变动画的节奏、情感和视觉效果。动画师必须具有良好的时间感和创意，以确保动画的时间控制与情感表达和故事情节相一致。通过精确的时间控制，动画可以更好地传达情感和吸引观众。
喜剧演员通常使用夸张的表情、动作和语言来引发笑声。这种夸张有助于传达幽默和夸张的情感。因此，如果我们借鉴这个类比，可以发现在 Web 设计中，夸张用于传达屏幕上最重要的元素。这引入了人机交互（HCI）中的两个重要概念：可见性和可查找性。界面中的所有元素可能是可见的，但设计元素的方式至关重要，以便最重要的操作易于查找。例如，主要按钮被设计成比次要按钮更加突出。有选择地在某些 UI 元素上应用夸张，以增强视觉效果、情感表达力和吸引力。夸张原则是一种强调性的技巧，可以引导用户的注意力，并传达兴奋、期待或被奖励的情感。
在 Web 动画设计中，你可以夸张某些元素，以向用户清楚地展示他们应该如何与界面互动。例如，用户提交表单或执行某些操作后，网站可以使用夸张的反馈动画，如成功提交时的火箭升空，以传达成功和满足感。
一个好的动画效果对于用户来说应该是无形的。然而，如果夸张过度，可能会让用户感到烦恼。如果发生这种情况，考虑使动画更加细微。
夸张是一种强调性的技巧，主要用于增加动画的生动性和戏剧性。我们在制作 Web 动画时，可以根据下面这些关键要点来应用夸张原则：
虽然夸张是一种重要的动画技巧，但需要谨慎使用。夸张应该在适当的程度上，以不分散观众的注意力或破坏动画的连贯性。夸张的应用需要动画师的判断和创意，以确保它增加了动画的吸引力和表现力。
在计算机生成图像（CGI）之前，经典动画师会尝试绘制对象和角色，并赋予它们三维属性，如形状、重量、高光和阴影，以使它们看起来自然和逼真。在人机交互（HCI）中，我们使用拟物化（Skeuomorphism）这个术语，意思是从现实物体中汲取灵感，然后应用到界面设计中的对象上。从 GUI 的早期，界面一直在使用高光、阴影和纹理来模仿现实世界中的物体，比如用于按钮的斜角和浮雕效果，或者用于便签应用的页面纹理。随着时间的推移，界面设计逐渐从这种形式的表现方式转向了极简主义设计（Flat Design），然后再次回到了现在被称为“Neumorphism”的设计风格。
在未来的增强现实（AR）和虚拟现实（VR）应用中，将更需要密切模拟光线、阴影和环境的真实世界属性，以实现从真实世界到增强现实元素的无缝过渡。无论流行的趋势如何，利用光线、阴影、形状和阴影的真实世界属性可以使界面更具沉浸感，并具有物理可感性（显示用户应该做什么的感知特征）。
理解立体造型的基础原则，将有助于你设计更成功的动画。
你可以通过添加阴影、高光和投影来创建立体感，使元素看起来像是浮在页面上，使用户能够更好地理解其层次结构。
Demo 地址：https://codepen.io/airen/full/wvRVEBX （来源于 @Nick）
虽然 Web 动画通常是 2D 的，但通过使用 3D 模拟技术，可以在 Web 中创建具有深度和透视感的场景：
立体造型强调在动画中要以三维的方式来表现物体和角色，以使其看起来更具立体感和质感。立体造型有助于增强动画的真实感和视觉吸引力。以下是立体造型原则的一些关键要点：
立体造型是动画制作中的关键原则，它有助于提高动画的视觉质量和真实感。通过准确的立体造型，动画师可以创造出具有立体感和深度感的角色和场景，使动画更具吸引力和视觉效果。这一原则强调了在动画中模拟三维世界的必要性，以创造出更具真实感的动画作品。
动画需要吸引用户。虽然没有确切的数学公式来做到这一点，但任何动画都应该引起用户的注意并产生吸引力。“吸引力”（Appeal）动画原则强调在动画中要创造出具有吸引力的角色和设计，以吸引用户的注意并使他们对动画产生兴趣。吸引力是一个广泛的概念，包括了角色设计、动态效果和情感表达等多个方面。
毫无疑问，UI 设计需要是功能性的；然而，它不应被视为美学的二者对立。在 UI 设计中，吸引力至关重要，因为许多产品将与你的产品竞争。你可以使用动画来定义产品的个性，与用户建立情感联系。你可以在以下几个情境中使用吸引力（Appeal）动画原则：
你可以根据下面这些要点将吸引力原则用于 Web 动画创作中：
吸引力是一个综合性的原则，它涉及到动画中的多个方面，包括设计、动态、情感和故事情节。通过创造出具有吸引力的角色和情节，动画可以更好地吸引观众的注意，使他们对动画产生兴趣和情感共鸣。这一原则在动画制作中是非常重要的，因为吸引力可以决定动画的成功和影响力。
掌握迪士尼的 12 大动画原则是一场旅程。
掌握这些原则是一个需要时间、实践和奉献的旅程。这些原则不仅对传统手绘动画有价值，对于当代的 Web 动画技术也同样适用。
无论你是经验丰富的动画师还是刚刚开始，应用这些原则将增强你动画的质量并吸引你的观众。记住要尝试、从成功和失败中学习，最重要的是通过动画让你的故事生动有趣。